<template>
  <view class="aftersale-view-detail">
    <view class="aftersale-view-block order-wrapper">
      <view class="order-info-block">
        <view class="order-info-left"><fui-text text="买家：" size="24" color="#666"></fui-text><fui-text text="张三" size="24" color="#666"></fui-text></view>
        <view class="order-info-right">
          <fui-button width="140rpx" height="38rpx" borderColor="var(--fui-color-primary)" background="#fff" radius="22rpx" size="24" color="var(--fui-color-primary)" @click="handleContact">
            <image class="order-btn-icon" src="/static/images/kefu.png"></image>联系买家
          </fui-button>
        </view>
      </view>
      <view class="order-info-goods">
        <image class="order-goods-image" src="/static/images/shopimg.png"></image>
        <view class="order-goods-desc">
          <view class="order-goods-title"><fui-text text="天水花牛苹果5斤装" size="28" fontWeight="bold" color="#333"></fui-text></view>
          <view class="order-goods-num"><fui-text text="x" size="24" color="#999"></fui-text><fui-text text="1" size="24" color="#999"></fui-text></view>
          <view class="order-goods-price"><fui-text text="￥" size="24" fontWeight="bold" color="#333"></fui-text><fui-text :text="utils.moneyFormatter(99.23)" size="36" fontWeight="bold" color="#333"></fui-text></view>
        </view>
      </view>
      <view class="order-info-block">
        <view class="order-info-left"><fui-text text="售后类型" size="24" color="#666"></fui-text></view>
        <view class="order-info-right" v-if="aftersaleData && aftersaleData.status"><fui-text :text="AFTERSALE_CHILD_STATUS[aftersaleData.status].name" size="24" fontWeight="bold" color="#333"></fui-text></view>
      </view>
      <view class="order-info-block">
        <view class="order-info-left"><fui-text text="退款金额" size="24" color="#666"></fui-text></view>
        <view class="order-info-right"><fui-text text="￥" size="24" fontWeight="bold" color="#EA5750"></fui-text><fui-text :text="utils.moneyFormatter(99.23)" size="28" fontWeight="bold" color="#EA5750"></fui-text></view>
      </view>
      <fui-collapse-item @change="onToggleCollapse">
        <template #content>
          <view class="order-info-block">
            <view class="order-info-left"><fui-text text="优惠金额" size="24" color="#666"></fui-text></view>
            <view class="order-info-right"><fui-text text="-￥" size="24" fontWeight="bold" color="#EA5750"></fui-text><fui-text :text="utils.moneyFormatter(0.73)" size="28" fontWeight="bold" color="#EA5750"></fui-text></view>
          </view>
          <view class="order-info-block">
            <view class="order-info-left"><fui-text text="订单金额" size="24" color="#666"></fui-text></view>
            <view class="order-info-right"><fui-text text="￥" size="24" fontWeight="bold" color="#333"></fui-text><fui-text :text="utils.moneyFormatter(100)" size="24" fontWeight="bold" color="#333"></fui-text></view>
          </view>
          <view class="order-info-block">
            <view class="order-info-left"><fui-text text="售后原因" size="24" color="#666"></fui-text></view>
            <view class="order-info-right"><fui-text text="协商一致退款" size="24" fontWeight="bold" color="#333"></fui-text></view>
          </view>
          <view class="order-info-block">
            <view class="order-info-left"><fui-text text="申请时间" size="24" color="#666"></fui-text></view>
            <view class="order-info-right"><fui-text :text="utils.dateFormatter(182892992993, 'y-m-d h:i:s', 2, true)" size="24" fontWeight="bold" color="#333"></fui-text></view>
          </view>
          <view class="order-info-block">
            <view class="order-info-left"><fui-text text="售后单号" size="24" color="#666"></fui-text></view>
            <view class="order-info-right">
              <fui-text text="R2523980120694045" :padding="[0, '10rpx']" size="24" fontWeight="bold" color="#333"></fui-text>
              <fui-text class="order-info-btn" text="复制" size="24" color="var(--fui-color-primary)" @click="handleCopy('R2523980120694045')"></fui-text>
            </view>
          </view>
          <view class="order-info-block">
            <view class="order-info-left"><fui-text text="订单编号" size="24" color="#666"></fui-text></view>
            <view class="order-info-right">
              <fui-text text="R2523980120694046" :padding="[0, '10rpx']" size="24" fontWeight="bold" color="#333"></fui-text>
              <fui-text class="order-info-btn" text="复制" size="24" color="var(--fui-color-primary)" @click="handleCopy('R2523980120694046')"></fui-text>
            </view>
          </view>
          <view class="order-info-block">
            <view class="order-info-left"><fui-text text="买家地址" size="24" color="#666"></fui-text></view>
            <view class="order-info-right">
              <fui-text text="张三 17711881894 宁夏回族自治区银川市金凤区ibi育成中心二期6号楼" size="24" fontWeight="bold" color="#333"></fui-text>
              <fui-text class="order-info-btn" text="复制" size="24" color="var(--fui-color-primary)" @click="handleCopy('张三 17711881894 宁夏回族自治区银川市金凤区ibi育成中心二期6号楼')"></fui-text>
            </view>
          </view>
        </template>
        <view class="more-wrapper">
          <fui-text :text="collapseText" size="24" color="#999"></fui-text>
        </view>
      </fui-collapse-item>
    </view>
    <view class="aftersale-view-block reject-wrapper">
      <view class="reject-title"><fui-text text="拒绝原因" size="24" color="#333"></fui-text></view>
      <view class="reject-desc"><fui-text text="拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因拒绝原因" size="24" fontWeight="bold" color="#333"></fui-text></view>
    </view>
    <view class="aftersale-view-block link-wrapper" @click="tab.navigateTo(negotiationLink)">
      <view class="link-title"><fui-text text="协商记录" size="24" color="#333"></fui-text></view>
      <view class="link-arrow"><fui-icon name="arrowright" size="48" color="#333"></fui-icon></view>
    </view>
    <view class="aftersale-view-block link-wrapper" @click="tab.navigateTo(evidenceLink)">
      <view class="link-title"><fui-text text="买家凭证" size="24" color="#333"></fui-text></view>
      <view class="link-arrow"><fui-icon name="arrowright" size="48" color="#333"></fui-icon></view>
    </view>
    <view class="aftersale-view-block link-wrapper" @click="tab.navigateTo(logisticsLink)">
      <view class="link-title"><fui-text text="查看物流" size="24" color="#333"></fui-text></view>
      <view class="link-arrow"><fui-icon name="arrowright" size="48" color="#333"></fui-icon></view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, inject } from 'vue'
import { useStore } from 'vuex'
import { AFTERSALE_CHILD_STATUS } from './consts'
import utils from '@/components/firstui/fui-utils'

const tab = inject('$tab')
const modal = inject('$modal')
const store = useStore()

const props = defineProps({
  aftersaleData: {
    type: Object,
    default: () => {}
  },
})

const negotiationLink = computed(() => `/pages/aftersale/negotiation?aftersaleId=${props.aftersaleData.id}`) // 协商记录
const evidenceLink = computed(() => `/pages/aftersale/evidence?aftersaleId=${props.aftersaleData.id}`) // 买家凭证
const logisticsLink = computed(() => `/pages/aftersale/logistics?aftersaleId=${props.aftersaleData.id}`) // 查看物流

// 联系买家
const handleContact = () => {
  uni.makePhoneCall({
    phoneNumber: '17711881894'
  })
}

// 查看更多
const collapseText = ref('查看全部')
const onToggleCollapse = (e) => {
  if(e.isOpen){
    collapseText.value = '收起'
  }else{
    collapseText.value = '查看全部'
  }
}

// 复制
const handleCopy = (text) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      modal.msg('复制成功')
    },
    fail: (err) => {
      console.error('复制失败', err)
    }
  })
}
</script>

<style lang="scss" scoped>
.aftersale-view-detail {
  .aftersale-view-block {
    border-radius: 12rpx;
    background-color: #fff;
    margin-bottom: 30rpx;
    padding: 30rpx;
  }
  .order-wrapper {
    .order-info-goods {
      display: flex;
      margin-top: 24rpx;
      margin-bottom: 16rpx;
      .order-goods-image {
        flex: 0 0 132rpx;
        width: 132rpx;
        height: 132rpx;
        border-radius: 12rpx;
        margin-right: 20rpx;
      }
      .order-goods-desc {
        flex: 1;
        width: calc(100% - 152rpx);
        .order-goods-title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          ::v-deep .fui-text__wrap {
            width: 100%;
            overflow: hidden;
            .fui-text__content {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }
    .order-info-block {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .order-info-left {
        flex: 0 0 160rpx;
        line-height: 1;
      }
      .order-info-right {
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        text-align: right;
        .order-info-btn {
          flex-shrink: 0;
        }
      }
      &:not(:last-child) {
        margin-bottom: 20rpx;
      }
      .order-btn-icon {
        width: 22rpx;
        height: 22rpx;
        margin-right: 4rpx;
      }
    }
  }
  .reject-wrapper {
    .reject-title {
      margin-bottom: 20rpx;
    }
    .reject-desc {
      border-radius: 12rpx;
      background-color: #F2F4F5;
      padding: 16rpx 20rpx 24rpx;
    }
  }
  .link-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx 30rpx;
    line-height: 1;
  }
  .more-wrapper {
    
  }
  ::v-deep .fui-collapse__item {
    display: flex;
    flex-direction: column-reverse;
    .fui-collapse-item__title {
      justify-content: center;
      margin-top: 24rpx;
    }
    .fui-collapse__title {
      flex: none !important;
    }
    .fui-collapse__border-color {
      background: #ffffff !important;
    }
  }
}
</style>